<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="id ? '编辑员工信息' : '添加员工'"
    width="500"
    :before-close="closeDialog"
  >
    <el-form ref="dataFormRef" :model="compData.dataForm" label-width="100px" :rules="formRules">
      <el-form-item label="部门选择" prop="port">
        <el-select v-model="compData.dataForm.port" placeholder="请选择部门">
          <el-option
            v-for="item in portList"
            :label="item.name"
            :value="item.id + ''"
            :key="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="compData.dataForm.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="职务" prop="job">
        <el-input v-model="compData.dataForm.job" autocomplete="off" />
      </el-form-item>
      <el-form-item label="手机号" prop="tel">
        <el-input v-model="compData.dataForm.tel" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="doSubmit">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ADD_STAFF, GET_STAFF_INFO, EDIT_STAFF, type IStaff } from '@/api/staff'
import { GET_PORT_LIST } from '@/api/port'
interface IPort {
  id: string
  name: string
}
const emits = defineEmits(['close'])
const { id } = defineProps(['id'])
console.log(id)
const compData = reactive({
  dataForm: {
    port: '',
    job: '',
    name: '',
    tel: ''
  }
})
const getDetail = () => {
  GET_STAFF_INFO(id).then((res) => {
    const userInfo = res.data[0]
    const info = {
      port: userInfo.port,
      job: userInfo.job,
      name: userInfo.name,
      tel: userInfo.tel
    }
    compData.dataForm = info
  })
}
if (id) {
  getDetail()
}
const dialogFormVisible = ref(true)
const portList = ref<IPort[]>([])
const dataFormRef = ref()
const checkTel = (rule: any, value: any, callback: any) => {
  var reg = /^1[3|4|5|7|8][0-9]{9}$/
  if (!reg.test(value)) {
    callback(new Error('请输入正确的手机号'))
  } else {
    callback()
  }
}
const formRules = reactive({
  port: [{ required: true, message: '请选择部门', trigger: 'change' }],
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  job: [{ required: true, message: '请输入职务', trigger: 'blur' }],
  tel: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { validator: checkTel, trigger: 'blur' }
  ]
})
const closeDialog = () => {
  emits('close')
}
//获取部门列表
const getPortList = () => {
  GET_PORT_LIST().then((res) => {
    portList.value = res.data
  })
}
getPortList()

//提交
const doSubmit = () => {
  console.log('doSubmit')
  dataFormRef.value.validate((valid: boolean) => {
    console.log(valid)
    if (valid) {
      let params: IStaff = {
        jobNum: '1',
        name: compData.dataForm.name,
        job: compData.dataForm.job,
        tel: compData.dataForm.tel,
        port: compData.dataForm.port
      }
      console.log(params)

      if (id) {
        params.id = id
        EDIT_STAFF(params).then(() => {
          emits('close', true)
        })
      } else {
        ADD_STAFF(params).then((res) => {
          console.log(res)
          emits('close', true)
        })
      }
    }
  })
}
</script>

<style></style>
